<!-- 组件化问题列表 -->
<template>
    <div>
        <el-card shadow="hover">
            <!--标题-->
            <h5>
                <router-link :to="{name:'article',params :{id :article.id}}" tag="span" class="art-title">
                    {{article.title}}
                </router-link>
            </h5>
            <!--问题标签-->
            <el-tag v-for="tag in article.tagList" :key="tag.id" style="margin-left: 6px">{{tag.tagname}}</el-tag>
            <el-row class="art-body">
                <!--		问题的封面-->
                <div class="side-img hidden-sm-and-down">
                    <img class="art-banner"
                         src="https://gitee.com/dominate_the_world/mypics/raw/master/img/20200923194016.png"/>
                </div>
                <!--		问题详细描述-->
                <div class="side-abstract">
                    <div class="art-abstract">{{article.description |ellipsis }}</div>
                    <div>
                        <el-button type="text">展开</el-button>
                    </div>
                </div>
            </el-row>

            <el-row>
                <el-col :span="7">
                    <el-button-group>
                        <el-button type="primary" icon="el-icon-caret-top" @click="like" size="medium">点赞{{article.likeNum}}次
                        </el-button>
                        <el-button type="primary" icon="el-icon-caret-bottom" size="medium"></el-button>
                    </el-button-group>
                </el-col>
                <el-col :span="17">
                    <ul class="foot-icon">
                        <i>发布时间 ：{{dateFormat(article.createTime)}}</i>
                        <i class="el-icon-share">分享</i>
                        <i class="el-icon-star-on">喜欢</i>
                    </ul>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script>
    import {likeQuestion} from "../../api";

    export default {
        name: 'questionList',
        //父组件传来的值
        props: ["article"],
        data() {
            return {}
        },

        //生命周期 - 创建完成（访问当前this实例）
        created() {

        },
        //生命周期 - 挂载完成（访问DOM元素）
        mounted() {

        },
        methods: {
            like() {
                console.log(this.article.id)
                likeQuestion(this.article.id).then(res=>{
                    console.log(res)
                    this.$message.success(res.data.msg);
                    //子组件完成点赞后通知父组件立即刷新数据
                    this.$emit("initQuestionData");
                })
            },
            dateFormat: function (time) {
                var date = new Date(time);
                var year = date.getFullYear();
                /* 在日期格式中，月份是从0开始的，因此要加0
                 * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
                 * */
                var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
                var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
                // 拼接
                return year + "-" + month + "-" + day + " / " + hours + ":" + minutes + ":" + seconds;
            },
        },
    }
</script>

<style scoped>
    #side .item {
        margin-bottom: 30px;
    }

    .btn-grop {
        margin-top: 5px;
    }

    .foot-icon i {
        margin-left: 5px;
        margin-right: 10px;
        text-decoration-color: #f56c6c;
        color: darkgrey;
    }

    .nav a {
        margin-right: 20px;
    }

    .nav a:hover {
        color: #409eff;
    }

    .art-item {
        position: relative;
    }

    img.tag {
        width: 16px;
        height: 16px;
    }

    .art-title {
        border-left: 3px solid #f56c6c;
        padding-left: 5px;
        cursor: pointer;
    }

    .art-title:hover {
        padding-left: 10px;
        color: #409eff;
    }

    .art-time {
        margin-right: 20px;
    }

    .art-body {
        display: flex;
        padding: 10px 0;
    }

    .side-img {
        height: 105px;
        width: 190px;
        overflow: hidden;
        margin-right: 10px;
    }

    img.art-banner {
        width: 100%;
        height: 100%;
        transition: all 0.6s;
    }

    img.art-banner:hover {
        transform: scale(1.4);
    }

    .side-abstract {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .art-abstract {
        flex: 1;
    }

    .art-more {
        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }

    .art-more .view {
        color: #aaa;
    }

    h5 {
        font-size: 18px;
    }

    .pagination {
        background-color: #f9f9f9;
    }
</style>
